<script lang="js" setup>
import {ref} from 'vue'
import {uploadFile, getFile} from '@/utils/common/upload'

const fileInput = ref(null)
const viewFile = ref(null)
const fileId = ref('8CFdNgOeL7EYoB4V')

function handleSelectFile() {
  fileInput.value.click()
}

async function handleChangeFile(event) {
  const files = event.target.files
  if (!files.length) return
  // 将FileList转换为数组并添加到selectedFiles
  fileId.value = await uploadFile({file: files[0]})
  handleClear()
}

function handleClear() {
  fileInput.value.value = null
}

async function handleGet() {
  const url = await getFile(fileId.value)
  if (url) {
    viewFile.value = url
  }
}
</script>
<template>
  <main class="socket-test">
    <el-button @click="handleSelectFile">上传文件</el-button>
    <div></div>
    <input type="file" hidden @change="handleChangeFile" ref="fileInput">

    <el-button @click="handleClear">清空</el-button>

    <el-button @click="handleGet">获取文件</el-button>
    <el-input v-model="fileId"></el-input>
    <div></div>
    <img v-if="viewFile" :src="viewFile" alt="">
    <span v-else>未上传</span>
  </main>
</template>
